@import './variables.scss';
@import './layout.scss';

// edit element
body .el-loading-mask {
  opacity: .5;
  filter: alpha(opacity=50);
  -moz-opacity: 0.5;
  -khtml-opacity: 0.5;
}

.el-slider .el-slider__marks-text {
  &:last-child {
    width: 40px;
  }
}

.el-menu .el-submenu__title i {
  color: white;
}

.el-menu .el-menu-item-group {
  background: rgba(39, 57, 116, 1);
}

.el-menu .el-menu-item:hover,
.el-menu .el-menu-item:focus {
  background: rgba(162, 185, 255, 0.25)
}

.el-menu .el-submenu__title:hover {
  background: rgba(39, 57, 116, 1);
}

.el-menu .el-submenu:hover {
  background: rgba(39, 57, 116, 1);
}

.el-menu .el-submenu:focus {
  background: rgba(39, 57, 116, 1);
}

.el-menu .el-menu-item-group__title {
  padding: 0;
}

.el-menu--vertical .el-menu--popup {
  padding: 0
}

.slider .el-submenu .el-menu-item {
  min-width: initial;
}

.el-submenu.is-opened .el-submenu__title {
  background: rgba(39, 57, 116, 1);
}

.el-table {
  width: 100%;

  thead {
    tr {
      th {
        background: rgba(243, 246, 254, .5);
      }
    }

    .cell {
      font-weight: bold;
    }
  }
}


.product-edit label.el-form-item__label {
  padding-right: 0;
}

.el-input.input-readonly {

  input {
    border: none;
    padding: 0;
    border-bottom: 1px solid rgb(220, 223, 230);
    border-radius: 0;
    box-sizing: border-box;
  }

}

.el-dialog {
  max-width: 1000px;
}

.dialog-form {
  .el-dialog__body {
    padding: 20px 20px 10px;
  }

  .el-dialog__footer {
    padding-top: 0px;
  }

  form {
    overflow: hidden;
    // width: 80%;
  }
}

.per-tree .el-tree-node__content:hover {
  background: none;
}


.userMessage {
  width: 50% !important;
}

.el-image-viewer__close {
  color: white;
}

// edit element


// other
.search-form {
  width: 100%;
  min-width: 800px;
  margin-bottom: 20px;
  padding: 22px 10px 0;
  box-sizing: border-box;
  background: #ffffff;
  border-radius: $--border-radius-base;
  border: 1px solid rgba(223, 229, 249, 1);

  .el-form-item {
    display: inline-block;
    margin-right: 10px;
    box-sizing: border-box;

    .el-input-group__append,
    .el-input-group__prepend {
      padding: 0 12px;
    }

    .el-input__inner {
      padding: 0 10px;
    }

    .el-date-editor .el-input__inner {
      padding: 0 30px;
    }

    .el-range-input {
      height: auto;
    }

    .el-range-editor--medium .el-range-separator {
      line-height: 36px;
    }
  }

  .form-item-all {
    width: 100%;
  }

  .el-form-item__label {
    padding-right: 5px;
  }


  .el-date-editor.el-input,
  .el-select,
  .el-input,
  .el-cascader {
    width: 210px;
  }
}

// 文字隐藏
.text-hidden {
  overflow: hidden;
  width: 100%;
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
}


.click-ele {
  color: $--color-primary;
  cursor: pointer;
  display: inline-block;
  margin: 0 5px;

  &:hover {
    text-decoration: underline;
    opacity: .7;
    filter: alpha(opacity=70);
    -moz-opacity: 0.7;
    -khtml-opacity: 0.7;
    // background: $--color-primary;
    // color: white;
  }
}

.click-ele.danger {
  color: $--color-danger;

  &:hover {
    color: $--color-danger;
  }
}

.click-ele.warning {
  color: $--color-warning;

  &:hover {
    color: $--color-warning;
  }
}

.click-ele.success {
  color: $--color-success;

  &:hover {
    color: $--color-success;
  }
}

.click-ele.info {
  color: $--color-info;

  &:hover {
    color: $--color-info;
  }
}

.click-ele.disabled {
  color: $--color-info;
  cursor: not-allowed;

  &:hover {
    color: $--color-info;
  }
}


.detail-title {
  width: 100%;
  padding: 10px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-content: center;
  font-size: 16px;
  font-family: MicrosoftYaHei;
  color: rgba(84, 95, 106, 1);
  line-height: 21px;

  .sign-text {
    font-weight: bold;
    color: $--color-primary;
  }
}

.c-select {
  width: 100%;
}

.pagination-wrapper {
  padding: 10px 0;
  display: flex;
  justify-content: flex-end;
}

.round {
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-left: 10px;
  background: $--color-success;
  border-radius: 50%;
  position: relative;
  top: 3px;
}

.round.yellow {
  background: $--color-yellow;
}

.round.warning {
  background: $--color-warning;
}

.brand-select {
  width: 100%;
}

.el-select-dropdown__item {
  display: flex;
  justify-content: flex-start;
  align-self: center;
  align-items: center;

  img {
    width: 20px;
    height: 20px;
    display: inline-block;
    margin-right: 5px;
  }
}

.sku .el-input input {
  text-align: center;
}

.sku .sku-cell .el-input input {
  padding: 0 5px;
}

.sku .is-error input {
  border-color: rgb(245, 108, 108);
}